<template>
  <div class="analyzepage">
    <!-- 标题 -->
    <div class="analyzepage-title">
      <div class="analyzepage-title__name">分析报告管理</div>
      <div class="analyzepage-title__right">
        <div class="analyzepage-title__temp" @click="changSortName">
          <div class="analyzepage-title__temp-name">报告名称</div>
          <img :src="desc === false && sortBy === 1 ? nameSort.img1 : nameSort.img2" class="specia-title__temp-cion"
            style="width: 16px; height: 16px;" />
        </div>
        <div class="analyzepage-title__temp" @click="changSortCreate">
          <div class="analyzepage-title__temp-name">创建时间</div>
          <img :src="desc === false && sortBy === 2 ? nameSort.img1 : nameSort.img2" class="specia-title__temp-cion"
            style="width: 16px; height: 16px;" />
        </div>
        <div class="analyzepage-title__temp" @click="changSortUpdate">
          <div class="analyzepage-title__temp-name">更新时间</div>
          <img :src="desc === false && sortBy === 3 ? nameSort.img1 : nameSort.img2" class="specia-title__temp-cion"
            style="width: 16px; height: 16px;" />
        </div>
        <el-input class="analyzepage-title__temp-ipt" suffix-icon="el-icon-search" v-model="name" placeholder="请输入报告名称"
          @change="getanalysisList"></el-input>
      </div>
    </div>
    <div class="analyzepage-content">
      <div class="analyzepage-content-temp" v-for="(item, index) in fileDataList" :key="index">
        <div class="analyzepage-content-add" v-if="item.name === 'init'" @click="handAdd()">
          <img src="./assets/images/plus.png" alt="" height="48" />
          <div>创建分析报告</div>
        </div>
        <div class="analyzepage-content-item" v-else @click="gotoReport(item)">
          <div class="analyzepage-content-item-name" style="display: flex;gap: 8px;">
            <!-- <div>{{ item.isPublic === 0 ? "私有" : "公有" }}</div> -->
            <el-tag v-if="item.isPublic === 0" type="danger" size="mini">私有</el-tag>
            <el-tag v-else type="success" size="mini">公有</el-tag>
            {{ item.name }}
          </div>
          <div class="analyzepage-content-item-content">
            {{ item.description }}
          </div>
          <!-- <div class="analyzepage-content-item-count">
            <div>节点数:{{ item.nodeNum || 0 }}</div>
            <div>共收录:{{ item.collectNum || 0 }}</div>
          </div> -->

          <!-- <div class="analyzepage-content-item-content">
            所属专题:{{ item.subjectDatasetId }}
          </div> -->
          <div class="analyzepage-content-item-date">
            <img src="./assets/images/date.png" alt="" />
            <div>
              {{ item.updateTime }}
            </div>
            <i class="fa-regular fa-pen-to-square analyzepage-icon-view" @click.stop="handGo(item)"></i>
            <i class="fa-regular fa-trash-can analyzepage-icon-close" @click.stop="delHanlde(item)"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 创建报告 -->
    <el-dialog title="创建分析报告" width="429px" class="analyzepage-dialog" :visible.sync="isanalyzepage" :show-close="false"
      :close-on-click-modal="false" :append-to-body="true">
      <el-row :gutter="20" type="flex" align="middle" class="mb-16">
        <el-col :span="6">报告名称</el-col>
        <el-col :span="18"><el-input v-model="addname" placeholder="请输入报告名称" maxlength="20" show-word-limit></el-input></el-col>
      </el-row>
      <el-row :gutter="20" type="flex" align="middle" class="mb-16">
        <el-col :span="6">报告简介</el-col>
        <el-col :span="18"><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
            class="analyzepage-dialog__body-temp-ipt" v-model="addcontent" placeholder="请输入报告简介" maxlength="200" show-word-limit></el-input></el-col>
      </el-row>
      <!-- 选择分析数据集 -->


      <el-row :gutter="20" type="flex" align="middle mb-16">
        <el-col :span="6">来源数据集</el-col>
        <el-col :span="18">
          <el-select v-model="select_name" placeholder="请选择来源数据集" class="full-width">
            <el-option v-for="(item, index) in small_data" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>


        </el-col>
      </el-row>
      <!-- 选择分析数据集 -->
      <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="6">报告权限</el-col>
        <el-col :span="18"><el-radio v-model="radio" :label="1">公有</el-radio>
          <el-radio v-model="radio" :label="0">私有</el-radio></el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isanalyzepage = false">取 消</el-button>
        <el-button type="primary" @click="addanalysisHandle">确认创建</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改报告" width="429px" class="analyzepage-dialog" :visible.sync="change_show" :show-close="false">
      <el-row :gutter="20" type="flex" align="middle" class="mb-16">
        <el-col :span="6">报告名称</el-col>
        <el-col :span="18"><el-input v-model="addname" placeholder="请输入报告名称" maxlength="20" show-word-limit></el-input></el-col>
      </el-row>
      <el-row :gutter="20" type="flex" align="middle" class="mb-16">
        <el-col :span="6">报告简介</el-col>
        <el-col :span="18"><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
            class="analyzepage-dialog__body-temp-ipt" v-model="addcontent" placeholder="请输入报告简介" maxlength="200" show-word-limit></el-input></el-col>
      </el-row>
      <el-row :gutter="20" type="flex" align="middle mb-16">
        <el-col :span="6">来源数据集</el-col>
        <el-col :span="18">
          <el-select v-model="select_name" placeholder="请选择来源数据集" class="full-width">
            <el-option v-for="(item, index) in small_data" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>


        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="6">报告权限</el-col>
        <el-col :span="18">
          <el-radio v-model="radio" :label="1">公有</el-radio>
          <el-radio v-model="radio" :label="0">私有</el-radio>
        </el-col>
      </el-row>
      <!-- <div class="analyzepage-dialog__body">
        <div class="analyzepage-dialog__body-temp">
          
          <div>报告简介</div>
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }" class="analyzepage-dialog__body-temp-ipt"
            v-model="chang_name" placeholder="请输报告简介"></el-input>
        </div>
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="change_show = false">取 消</el-button>
        <el-button type="primary" @click="edidanalysisHandle">确认修改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="温馨提示" width="332px" class="analyzepage-close" :visible.sync="closeShow" :show-close="false">
      <div class="analyzepage-close__body">确定删除所选报告吗？</div>
      <div slot="footer" class="close-footer">
        <el-button @click="closeShow = false">取 消</el-button>
        <el-button type="danger" @click="delanalysisHandle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  analysisList,
  addanalysis,
  delanalysis,
  editanalysis,
} from "@/api/modules/analysis";

import { reportList, addreport, delreport, editreport } from "@/api/modules/report";
import dateUtils from "../../utils/dateUtils.js";
import {
  subjectdatasetList,

} from "@/api/modules/subject_data";

export default {
  name: "AnalyzePage",
  data() {
    return {
      nameSort: {
        sort: "des",
        img1: require("./assets/images/sort-a.png"),
        img2: require("./assets/images/sort-z.png"),
      },
      dateSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      uploadSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      fileDataList: [],
      radio: 1,
      isanalyzepage: false,
      isUpload: false,
      name: "",
      addname: "",
      addcontent: "",

      closeShow: false,
      select_id: "",
      change_show: false,
      chang_name: "",
      desc: true,
      sortBy: '',

      isSelect: false,
      small_data: [],
      search_name: "",
      select_name: [],
      analysName: ''
    };
  },
  mounted() {
    this.getanalysisList();
    this.getanalysis();
  },

  methods: {

    getanalysis() {
      //创建报告时获取分析数据集
      analysisList({
        name: this.analysName,
        desc: true,
        sortBy: 3
      }).then((res) => {
        if (res.code == 200) {
          this.small_data = res.rows;
          // this.small_data.push({
          //   name: "init",
          //   id: "1",
          // });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },



    changeSelectHandle(val) {
      this.select_name = [];
      this.small_data.forEach((item) => {
        if (item.value) {
          this.select_name.push(item.name);
        }
      });
    },



    changSortName() {
      this.sortBy = 1
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.getanalysisList();
    },
    changSortCreate() {
      this.sortBy = 2
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.getanalysisList();
    },
    changSortUpdate() {
      this.sortBy = 3
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.getanalysisList();
    },
    edidanalysisHandle() {
      if (!this.addname) {
        this.$message({
          message: "请输入报告名称",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (!this.addcontent) {
        this.$message({
          message: "请输入报告简介",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (!this.select_name.length > 0) {
        this.$message({
          message: "请选择来源数据集",
          type: "error",
          showClose: true,
        });
        return;
      }

      editreport({
        id: this.select_id,
        name: this.addname,
        description: this.addcontent,
        isPublic: this.radio,
        analysisDatasetId: this.select_name,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.change_show = false;
          this.addname = "";
          this.addcontent = "";
          this.radio = 1;
          this.select_name = '';
          this.getanalysisList();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    delHanlde(item) {
      this.select_id = item.id;
      this.closeShow = true;
    },
    delanalysisHandle() {
      delreport(this.select_id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.closeShow = false;
          this.getanalysisList();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    gotoReport(item) {
      this.$router.push({
        path: "/report",
        query: {
          report: item.id,
          analysId: this.select_name,
        },
      });
    },
    addanalysisHandle() {
      if (!this.addname) {
        this.$message({
          message: "请输入报告名称",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (!this.addcontent) {
        this.$message({
          message: "请输入报告简介",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (!this.select_name.length > 0) {
        this.$message({
          message: "请选择来源数据集",
          type: "error",
          showClose: true,
        });
        return;
      }
      addreport({
        name: this.addname,
        description: this.addcontent,
        isPublic: this.radio,
        analysisDatasetId: this.select_name,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.addname = "";
          this.addcontent = "";
          this.radio = 1;
          this.isanalyzepage = false;
          this.getanalysisList();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    getanalysisList() {
      reportList({
        name: this.name,
        desc: this.desc, //true倒序，false正序
        sortBy: this.sortBy,
        isPublic: 0,
      }).then((res) => {
        if (res.code == 200) {
          this.fileDataList = res.rows;
          this.fileDataList.push({
            name: "init",
            id: "1",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    getDate(item) {
      return dateUtils.dateToStr("yyyy-MM-DD HH:mm:ss", item);
    },
    handAdd() {
      this.addname = "";
      this.addcontent = "";
      this.radio = 1;
      this.select_name = '';
      this.isanalyzepage = true;
    },
    handGo(item) {
      this.change_show = true;
      this.select_id = item.id;
      this.addname = item.name;
      this.addcontent = item.description;
      this.select_name = item.analysisDatasetId;
      this.radio = item.isPublic;
    },
  },
};
</script>

<style lang="scss">
// 样式覆盖


.analyzepage-dialog {
  .el-dialog__header {
    padding: 24px;
  }

  .el-dialog__body {
    padding: 0 24px;
  }

  .el-dialog__footer {
    padding: 24px;
  }

  .analyzepage-dialog__body {
    .analyzepage-dialog__body-temp {
      width: 100%;
      display: flex;
      align-items: center;
      height: 46px;
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0 !important;
      }

      &>div {
        width: fit-content;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-right: 24px;
      }

      .analyzepage-dialog__body-temp-ipt {
        flex: 1;
        height: 100%;

      }
    }

    .upload-demo {
      width: 100% !important;
      border-radius: 0 !important;

      .el-upload {
        width: 100% !important;
        margin-bottom: 24px;
      }

      .el-upload-dragger {
        width: 100% !important;
        border-radius: 0 !important;
      }

      .el-upload__text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .upload-demo-upload {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 24px;
        cursor: pointer;
      }

      .upload-demo-img {
        width: 60px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 10px;
      }

      .el-upload-dragger {
        padding-top: 16px;
      }
    }
  }
}

.analyzepage-close {
  padding: 24px !important;
  box-sizing: border-box;

  .el-dialog__header {
    font-size: 22px;
    font-family: Inter, Inter;
    font-weight: normal;
    color: #313131;
    line-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 0 !important;
  }

  .el-dialog__body {
    padding: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #313131;
    line-height: 35px;
  }

  .close-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-button {
      flex: 1 !important;
      height: 100%;

      &:first-child {
        margin-right: 24px;
      }
    }
  }
}

.analyzepage-dialog__body-temp-ipt .el-textarea__inner {
  font-family: inherit !important;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// 组件样式
.thr-select {
  flex: 1 !important;
  height: 40px;
  background: #ffffff;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #e7e7e7;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .thr-select-playolder {
    font-size: inherit;
    color: #C1C4CB;
    line-height: 24px;
    width: 200px;
    white-space: nowrap;
    /*规定段落中的文本不进行换行*/
    overflow: hidden;
    /*内容会被修剪，并且其余内容是不可见的。*/
    text-overflow: ellipsis;
    /*显示省略号来代表被修剪的文本*/
  }

  .thr-select-name {
    color: #000000;
  }

  .thr-select-line {
    width: 1px;
    height: 100%;
    background: #d7dfe9;
    margin-right: 8px;
  }

  .thr-select-icon {
    font-size: 16px;
    color: #d7dfe9;
  }

  .thr-select-popup {
    width: 100%;
    max-height: 266px;
    position: absolute;
    top: 44px;
    left: 0;
    padding: 24px;
    box-sizing: border-box;
    z-index: 9;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
    overflow-y: auto;
  }

  .thr-select-ul {
    margin-top: 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .thr-select-li {
    height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 24px;
    cursor: pointer;

    &>span {
      margin-left: 4px;
    }
  }
}

.analyzepage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;

  .analyzepage-title {
    height: 46px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .analyzepage-title__name {
      font-size: 14px;
      font-weight: bold;
      color: #313131;
      line-height: 23px;
    }

    .analyzepage-title__temp {
      display: flex;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 24px;
      margin-right: 24px;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;

      .analyzepage-title__temp-name {
        margin-right: 4px;
        width: fit-content;
        height: 24px;
        white-space: nowrap;
      }

      .analyzepage-title__temp-cion {
        width: 16px;
        height: 16px;
      }
    }

    .analyzepage-title__right {
      display: flex;
      align-items: center;
      padding-right: 28px;
    }

    .analyzepage-title__temp-ipt {
      width: 300px;
    }

    .analyzepage-title__temp-btn {
      margin-left: 24px;
    }
  }

  .analyzepage-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;
    box-sizing: border-box;
    overflow-y: scroll;

    .analyzepage-content-temp {
      width: calc(25% - 24px);
      margin-bottom: 24px;
      margin-right: 24px;
      // min-height: 200px;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 8px 8px 0px rgba(76, 86, 187, 0.05);
      }
    }

    .analyzepage-content-add {
      width: 100%;
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #4c56bb;
      line-height: 20px;
    }

    .analyzepage-content-item {
      padding: 24px;
      box-sizing: border-box;

      .analyzepage-content-item-name {
        // height: 15px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #4c56bb;
        line-height: 21px;
        width: auto;
        margin-bottom: 12px;
        display: flex;
        align-items: center;

        &>div {
          width: 40px;
          height: 20px;
          background: #ffffff;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          border: 1px solid #ffc5c1;
          margin-right: 4px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #ff3838;
          line-height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .analyzepage-content-item-count {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }

      .analyzepage-content-item-subject {
        width: fit-content !important;
        height: 24px;
        background: #ffffff;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #c6caff;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 20px;
        padding: 2px 8px;
        box-sizing: border-box;
        margin-bottom: 14px;
      }

      .analyzepage-content-item-content {
        height: 72px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        width: 100%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        margin-bottom: 16px;
      }

      .analyzepage-content-item-date {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 14px;
        width: 100%;
        position: relative;

        &>img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }

        &>i {
          display: none;
        }

        &:hover {
          &>i {
            display: inline-block !important;
          }
        }
      }

      .analyzepage-content-item-line {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 14px;
      }

      .analyzepage-content-item-btm {
        display: flex;

        .analyzepage-content-item-btm-name {
          display: flex;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #313131;
          line-height: 20px;

          .analyzepage-content-item-btm-num {
            font-size: 16px;
            font-family: DIN Alternate, DIN Alternate;
            font-weight: bold;
            color: #313131;
            line-height: 20px;
          }
        }

        .analyzepage-content-item-btm-up {
          width: 90px;
          height: 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;

          &>img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          background: #f2f5ff;
          cursor: pointer;
          font-size: 12px;
          font-family: PingFang SC,
          PingFang SC;
          font-weight: 400;
          color: #4c56bb;
          line-height: 20px;
          margin-left: 8px;
        }
      }
    }
  }

  .analyzepage-icon-view {
    position: absolute;
    right: 32px;
    font-size: 18px;
    color: #000000;
  }

  .analyzepage-icon-close {
    position: absolute;
    right: 0px;
    font-size: 18px;
    color: #000000;
  }
}
</style>
